<template>
	<view class="app">
		<view class="pic">
			<image src="../../static/logo.png" mode="aspectFill"></image>
		</view>
		<view class="mid">
			<view class="head">
				<u--input class="username" placeholder="请输入账号/邮箱" border="none" clearable v-model="user.username">
				</u--input>
				<u--input class="password" placeholder="请输入密码" border="none" clearable v-model="user.password"
					type="password"></u--input>
			</view>
			<u-button class="login" customStyle="font-size:30rpx" size="normal"
				color="linear-gradient(to right, rgb(82, 136, 245), rgb(213, 51, 186))" shape="circle" @click="toIndex">
				<!-- 解决无法修改字体大小问题 -->
				<text>登录</text>
			</u-button>
			<u-toast ref="uToast"></u-toast>
			<view class="bottom">
				<u-button class="find" size="normal" color="rgb(236, 164, 55)" shape="circle" @click="toFindPassword">
					<text>找回密码</text>
				</u-button>
				<u-button class="register" size="normal" color="rgb(56, 154, 255)" shape="circle" @click="toRegister">
					<text>用户注册</text>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from "@/api/user.js"
	export default {
		data() {
			return {
				user: {
					username: "",
					password: ""
				},
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		onLoad() {
			// console.log("开发环境信息", uni.getSystemInfoSync());
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			toIndex() {
				console.log('用户信息', this.user);
				if (!(this.user.username != "" && this.user.password != "")) {
					this.fillMsg("error", "请输入完整信息!");
				} else {
					login({
						username: this.user.username,
						password: this.user.password
					}).then(res => {
						console.log("请求API接口【"+ this.$e.Url+"/user/login】", res);
						if (res.data.result == null) { //登录错误
							this.fillMsg("error", "账号或密码错误!");
						} else {
							this.$e.User = res.data.result;
							console.log("全局变量this.$e:", this.$e.User);
							uni.setStorage({
								key: "userInfo",
								data: res.data.result,
							})
							uni.setStorage({
								key: "token",
								data: res.data.result.token,
							})
							uni.switchTab({ //记住这是tabar页面，和普通页面不一样
								url: "/pages/index/index"
							})
						}
					})
				}
			},
			toFindPassword() {
				uni.navigateTo({
					url: "/pages/findPassword/findPassword"
				})
			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/background.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.app {
		display: flex;
		flex-direction: column;
		// align-items: center;
		margin: 30rpx;

		.pic {
			margin: 300rpx auto 0rpx; //自动居中
			width: 300rpx;
			height: 300rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// background-color: black;
			border-radius: 50%;
			border: 1px solid #E3F4FF;
			box-shadow: 0 0 10rpx 10rpx rgba(139, 205, 255, 0.5);

			image {
				height: 100%;
				width: 100%;
				// border-radius: 50%;
			}
		}

		.mid {
			margin: 100rpx 30rpx;
			padding: 30rpx 40rpx;
			border-radius: 30rpx;
			box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(149, 149, 149, 0.4);
			background-color: #ffffff;
			opacity: 0.9;

			.head {
				box-shadow: 0rpx 0rpx 20rpx 20rpx rgba(132, 202, 255, 0.2);
				border-radius: 20rpx;
				padding: 5rpx;
				opacity: 0.9;

				.username {
					background-color: white;
					// opacity: 0.5; //透明度
					font-size: 30rpx;
					margin: 30rpx 0;
					display: flex;
					align-items: center;
					// box-shadow: 0rpx 0rpx 5rpx 5rpx rgba(149, 149, 149, 0.5);
					border-radius: 20rpx;
					height: 90rpx;
					margin: 30rpx;
				}

				.password {
					background-color: white;
					// opacity: 0.5; //透明度
					font-size: 30rpx;
					margin: 30rpx 0;
					display: flex;
					align-items: center;
					// box-shadow: 0rpx 0rpx 5rpx 5rpx rgba(149, 149, 149, 0.5);
					border-radius: 20rpx;
					margin: 30rpx;

					.showPwd {
						width: 10rpx;
						height: 10rpx;
						background-color: red;

						// image {
						// 	width: 100%;
						// 	height: 100%;
						// }
					}
				}
			}


			.login {
				box-shadow: 0rpx 0rpx 15rpx 15rpx rgba(149, 149, 149, 0.2);
				border-radius: 30rpx;
				margin: 30rpx 0;
				height: 90rpx;

				text {
					font-size: 40rpx;
				}

			}

			.bottom {
				display: flex;
				align-content: center;
				justify-content: space-between;

				.find {
					box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(149, 149, 149, 0.2);
					border-radius: 15rpx;
					margin: 0rpx 0;
					height: 50rpx;
					width: 150rpx;

					text {
						font-size: 15rpx;
					}
				}

				.register {
					box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(149, 149, 149, 0.2);
					border-radius: 10rpx;
					margin: 0rpx 0; //这个重要，不然不是两端对齐
					height: 50rpx;
					width: 150rpx;

					text {
						font-size: 20rpx;
					}
				}
			}

		}

	}
</style>
